<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>图标集</title>
    
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.lite.min.css"></link>
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../jquery-tag-demo.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>	
    <script type="text/javascript" src="../mock-min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    
    <script type="text/javascript">
        var HISUIStyleCode = 'lite';
    </script>

    <script src="../../api/icon/icondic.js" type="text/javascript"></script>
    <style>
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            clear: both;
        }
        ul>li {
            line-height: 28px;
            height: 28px;
            width:200px;
            padding: 0 5px 0 15px;
            float: left;
        }
        ul.whitelist>li{
            padding-top:5px;
        }
        ul.whitelist>li .l-btn-text{
            font-size: 12px;
        }
        ul>li>a {
            text-decoration: none;
            color:#000000;
        }
        ul.iconlist>li:hover,ul.fontlist>li:hover,ul.arrowlist>li:hover,.bigiconlist li:hover {
            background-color: #E3E3E3;
        }
        .icon{
            background-position: left 0px center;
            display: inline-block;
            font-size: 12px;
            word-break: break-all;
        }
        .icon::before{
            margin: 6px;
        }
        ul>li span{
            height: 28px;
            display: inline-block;
        }
        .iconlist, .fontlist, .arrowlist, .bigiconlist, chinCharlist{
            display: inline-block;
        }
        .bigicon{
            height: 40px;
            line-height: 40px;
        }
        .bigicon .icon::before{
            font-size: 28px;
        }
        .line{
            margin: 5px;
            border-bottom: 1px dashed #e5e5e5;
        }
        .panel-header, .panel-body {
            border-color: #ffffff;
        }
        .panel-header-card + .panel-body {
            border-top: 1px dashed #e5e5e5;
        }
        .bigicon-tr td{
            line-height: 28px;
        }
        .bigicon-tr .icon{
            padding-left:30px;
        }
        .wicon-tr .icon{
            background-color: #378ec4;
            background-position: left 3px center;
        }
        span.iconpopover {
            display: block;
            padding-left: 10px;
        }
        .l-btn{
            text-align: left;
        }
    </style>
</head>
<body>
    <h2>图标列表</h2>
    <h3>所有图标：</h3>
    <div class="hisui-panel" title="白色(16*16)" data-options="headerCls:'panel-header-card',titleWidth:80" style="padding:10px;margin-bottom:10px;">    
        <ul class="whitelist"></ul>
    </div>    
    <div class="hisui-panel" title="图标(16*16)" data-options="headerCls:'panel-header-card',titleWidth:80" style="padding:10px;margin-bottom:10px;">    
        <ul class="iconlist"></ul>
    </div>
    <!-- <div class='line'></div> -->
    <div class="hisui-panel" title="文字处理图标(16*16)" data-options="headerCls:'panel-header-card',titleWidth:160" style="padding:10px;margin-bottom:10px;">    
        <ul class="fontlist"></ul>
    </div>
    <div class="hisui-panel" title="黑色线条图标-常用于侧菜单图标" data-options="headerCls:'panel-header-card',titleWidth:260" style="padding:10px;margin-bottom:10px;">    
        <ul class="blacklist"></ul>
    </div>
    <!-- <div class='line'></div> -->
    <div class="hisui-panel" title="汉字图标(16*16)" data-options="headerCls:'panel-header-card',titleWidth:160" style="padding:10px;margin-bottom:10px;">    
        <ul class="chinCharlist"></ul>
    </div>
    <!-- <div class='line'></div> -->
    <div class="hisui-panel" title="箭头图标(16*16)" data-options="headerCls:'panel-header-card',titleWidth:120" style="padding:10px;margin-bottom:10px;">
        <ul class="arrowlist"></ul>
    </div>
    <!-- <div class='line'></div> -->
    <div class="hisui-panel" title="大图标(28*28)" data-options="headerCls:'panel-header-card',titleWidth:100" style="padding:10px;margin-bottom:10px;">
        <div class="bigiconlist"></div>
    </div>
    
    <h3>说明:</h3>
    <span>各种小图标，可用到按钮(linkbutton),菜单(menu),工具栏(toolbar)</span>
    <h3>如：</h3>
    <div class="demo-exp-code entry-content">
        <a href="#" class="hisui-linkbutton" iconCls="icon-w-clean">清屏</a>
        <pre class="prettyprint hide lang-html"><code>&lt;a href="#" class="hisui-linkbutton" iconCls="icon-w-clear"&gt;清屏&lt;/a&gt;</code></pre>
    </div>
    <div class="demo-exp-code entry-content"> 
        <a href="#" class="hisui-menubutton" menu='#mm', iconCls="icon-add-note">操作</a>
        <div id="mm">
            <div data-options="iconCls:'icon-undo'">撤销</div>
            <div data-options="iconCls:'icon-redo'">恢复</div>
        </div>
<pre class="prettyprint hide lang-html">
&lt;a href="#" class="hisui-menubutton" menu='#mm', iconCls="icon-add-note"&gt;操作&lt;/a&gt;
&lt;div id="mm"&gt;
    &lt;div data-options="iconCls:'icon-undo'"&gt;撤销&lt;/div&gt;
    &lt;div data-options="iconCls:'icon-redo'"&gt;恢复&lt;/div&gt;
&lt;/div&gt;
</pre>
    </div>
    <div class="demo-exp-code entry-content"> 
            <table class="hisui-datagrid" title="医嘱列表" style="width:400px;height:150px" 
            data-options="rownumbers:true,singleSelect:true,pagination:false,toolbar:[{
                    iconCls: 'icon-stop-order',
                    text:'停止医嘱',
                    handler: function(){alert('停止医嘱')}
                },{
                    iconCls: 'icon-cancel-order',
                    text:'撤销医嘱'
                },{
                    iconCls: 'icon-abort-order',
                    text:'作废医嘱'
                },'-',{
                    iconCls: 'icon-tip'
                }]"> 
            </table>
            <pre class="prettyprint hide lang-js">
        toolbar: [{
            iconCls: 'icon-edit',
            text:'停止医嘱',
            handler: function(){alert('停止医嘱')}
        },{
            iconCls: 'icon-save',
            text:'撤销医嘱'
        },{
            iconCls: 'icon-remove',
            text:'作废医嘱'
        },'-',{
            iconCls: 'icon-tip'
        }]</pre>
    </div>
    <div>
        <h3>常用图标说明</h3>
        <table class="table" id="iconnotelist">
            <tr class="protitle">
                <th width=44px>图标</th>
                <th width=190px>类</th>
                <th>说明</th>
                <th></th>
            </tr>
        </table>
    </div>
    <div class="mytooltip"></div>
    <script type="text/javascript">
        $(function(){
            var wicons = ['add','close','find','edit','update','save','arrow-down','arrow-up','arrow-left','arrow-right','back','cal','cancel','card','clean','config',
            'epr','file','file-open','home','list','other','paper','print','switch','import','export','star','msg','copy',
            'stamp','batch-cfg','inv','batch-add','eye','calc','submit','clock','rent','run','line-key','takes','key','img','setting','ok','filter','predrug',"trigger-box",
            "paid","zoom","shrink","book","upload","pen-paper","volume-up","download","reset","pause-circle","skip-no","ca",'ster-bd','ster-leak','scan-code','canceldrug','camera'
        ];
            for(var i=0;i<wicons.length;i++){
                //<span class="icon icon-w-'+wicons[i]+'">icon-w-'+wicons[i]+'</span>\
                $(
                    '<li>\
                    <a class="showicon" href="#" iconCls="icon-w-'+wicons[i]+'" style="width:180px;">icon-w-'+wicons[i]+'</a>\
                    </li>'
                ).appendTo(".whitelist").find("a").linkbutton();
            }
            /*--------------------------------*/
            var icons = ['add','add-item','write-order','cancel','edit','remove','save','cut','ok','no','reload','search','print','help','sum','tip','filter'
            //,'mini-add','mini-edit','mini-refresh' /*2018-06-28 去除mini图标*/
            //,'large-picture','large-clipart','large-shapes','large-smartart','large-chart','large-report'
            ,'bed','house','house-maint','house-posi-maint','person','person-key-yel','key-switch','big-switch','report-switch','report-blue-shie-key','patient','outhosp-patient','stethoscope'
            ,'uncheckin','checkin','end-adm','change-loc','doctor','clear-screen','read-card','update','upload-cloud','unload-cloud','reset'
            ,'other','patient-info','del-diag','add-diag','emr-cri'
            ,'funnel-eye','funnel-half','funnel-empty','funnel-on','eye','green-line-eye','export','import','download','omega','eye-deepgrade'
            ,'fee-arrow','fee'
            ,'star-yellow','star-light-yellow','star','star-half','star-empty','star-orange-border','star-orange-body','book','all-select','all-unselect'
            ,'select-grant','cancel-select-grant','refuse-select-grant','double-quotes','transfer'
            ,'batch-cfg','batch-add','import-xls','init','inv-search','submit','chart-sum','chart-year'
            ,'attachment','import-reset','mnypaper-cfg','mnypaper-run','mnypaper-ok','mnypaper-no','mnypaper-down','mnypaper-down2'
            ,'stamp','stamp-cancel','stamp-pass','line-paid','split','alert','user','money-down'
            ,'max-no','excel','img','save-to','save-sure','export-data','export-all','set-col','template','adjust-inventory','cancel-money'
            ,'set-zero','accept-money','accept','show-set','camera','blue-edit','gray-edit','pat-write','up','down','fx','key','run','muti-key'
            ,'pause','forbid','ignore','re-ignore','unuse','arrow-up','person-seal'
            ,'scanning','return','doc-caseload','snowflake-blue','speci-mt','print-box','tube-add','tube-del','wrench-blue','gen'
            ,'paper-submit','open-book','export-paper','track','paper-eye','run-red',"compare-no","compare-yes","compare","paper-arrow"
            ,'adm-add','adm-same','alert-red','all-screen','analysis','arrow-blue','arrow-zoom','arrow-shrink','audit-x','base-info','blue-drug-ok','blue-move','book-green','bottle-drug','cal-pen','cancel-ref','cancel-top','check','checkbox','chg-doctor-grant','clock','clock-blod','clock-record','clock-black','clock-orange','barbell','target-arrow','contain','doctor-green-no','down-arrow-box','drug','drug-arrow-red','drug-audit','drug-clock','drug-link','dsh-water','durg-freq','durg-ref','face-red','find-adm','fire','format-line','format-line-dott','format-line-num','gen-barcode','home-black','home-gray','icd','injector','knw-submit','location','lock','move-left-most','move-up-most','mtpaper-add','mtpaper-arrw-lftp','mtpaper-redo','mtpaper-undo','mttext','mutpaper-tri','mutpaper-x','nail','no-conatin','other-yellow','paper-bed','paper-blue-line','paper-chart','paper-drug','paper-link-pen','paper-new','paper-no','paper-ok','paper-opr-record','paper-save','paper-table','paper-upgrade','paper-upgrade-add','paper-x','pat-add-red','pat-alert-red','pat-alert-yellow','pat-house','pat-house-switch','pat-opr','radio','ref','repeat-drug','right-arrow','switch','tel','text','tip-blue','top-green','trans-pat','tube','unlock','upload','virus','virus-drug','water-drop','yellow-qa'
            ,'down-blue','export-report','add-report','finish-report','take-report','paper-plane','undo-paper-plane','h24-stat','stat','wax-stat','wax-tat-stat','paper-stat','slice-stat','slice-tat-stat','slice-only','sample-stat','paper-pen','paper-pen-blue','wating','done','user-black','report-check-black','up-gray','down-gray','pat-info','tooth',
            'paid','return-paid','int-bill','cancel-int-bill','reprint-inv','print-inv','rebill','pat-fee-det','find-paid-det','find-ord-det',
            'find-fee-itm','skip-no','injector-water','alert-pen','board-alert','doctor-green-pen','nurse-pen','minus','alarm','ip-cfg','have-son-node','mater-info','send-msg','price-maint','ga-maint','qua-pro-sort','change-pay-way','qua-pro-dis','qua-pro-blue','rectangle-flow','paper-switch'
            ,'bell-blue-no','bell-blue','bell-yellow','have-message','three-cuboid-green','dustbin-red'
            ,'print-arr-bo','print-arr-bo-gray','gear-gray','triangle-green-right','triangle-gray-right','triangle-green-left','triangle-gray-left','paper-pay','paper-pay-gray','compu-torus','compu-torus-gray','two-recta-gear','two-recta-gear-gray','compu-run','compu-run-gray','paper-blue-add','paper-blue-add-gray','trian-recta-right','trian-recta-right-gray','box-red-add','box-red-add-gray','green-chart','gray-chart','report-eye','report-eye-gray','trian-recta-left','trian-recta-left-gray','refresh-gray','clock-pen','clock-pen-gray','drug-eye','drug-eye-gray','miss-img'
            ,"herb-back","herb-pre","herb-next","herb-no","herb-ok","decoct-herb","decoct-change","paper-eye-r","paper-pre","no-dot","date",'verify','ca-green','ster-again','ster-bat','ster-bio','ster-cancel','ster-finish','ster-ok','alarm-key','align-center-blue','align-left-blue','align-right-blue','same-height-blue','same-size-blue','same-width-blue','valign-bottom-blue','valign-middle-blue','valign-top-blue','barcode-blue','qrcode-blue','line','move','table-blue','table-col'
			,'close','cale-3day','paper-lightning','sure-readed','read-details','person-group','export-pdf','no1','no2','no3'
            ,'bag','bag-x','disp-x','disp-back','ca','outInstc-mgr','book-rep','book-rep-v1','book-pen','paper-settings','book-settings','eye-scan-box','org-frame','alert-pen-gray','paper-set-qus','bk-mgr','msg-unread','msg-unread-unprocessed','msg-read','msg-read-unprocessed','msg-read-processed','sound','needle-sticks','contact-with-fluid','paper-minus','fishbone-diagram','stamp-add','stamp-undo','video','share','share-no','paper-share','home-back','paper-plane-clock','file-open','file','paper-unlink','paper-print','shopping-cart-ok','person-ok','physics-monitor','change-x-virus','ice-water','circle-down','template-down','multi-del'
            ,'insert-local-image','edit-picture','creating-a-pedigree-map','edit-pedigree-chart','image-properties'
		];
			
            //icons.sort();
            for(var i=0;i<icons.length;i++){
                $(
                    '<li>\
                    <span class="icon icon-'+icons[i]+'">icon-'+icons[i]+'</span>\
                    </li>'
                ).appendTo(".iconlist");
            }
            var papericons = [
                'abort-order','cancel-order','copy-drug','copy-prn','copy-sos','exe-order','replace-order','stop-order','write-order'
                ,'add-note','apply-adm','apply-check','apply-opr','check-reg','paper','paper-cfg','paper-tri','resort','save-tmpl'
                ,'paper-stamp','paper-money','paper-arrow-down','paper-arrow-up','paper-link','paper-info','set-paper','red-cancel-paper'
                ,'paper-ques','paper-key','paper-group','paper-clock-bue'
            ];
            //icons.sort();
            for(var i=0;i<papericons.length;i++){
                $(
                    '<li>\
                    <span class="icon icon-'+papericons[i]+'">icon-'+papericons[i]+'</span>\
                    </li>'
                ).appendTo(".iconlist");
            }
            //-----
            var fonticons=['lt-rt-19','lt-rt-28','lt-rt-37','lt-rt-46','lt-rt-55','lt-rt-64','lt-rt-73','lt-rt-82'
            ,'bold','font','strikethrough','underline','incline','subscript','superscript','indentation','unindent','align-justify'
            ,'align-left','align-center','align-right','cut-blue','paste','paste-board','copy','internationalize'];
            for(var i=0;i<fonticons.length;i++){
                $(
                    '<li>\
                    <span class="icon icon-'+fonticons[i]+'">icon-'+fonticons[i]+'</span>\
                    </li>'
                ).appendTo(".fontlist");
            }
            // 黑色线条图标,炫彩与极简相同，可以使用在侧菜单
            var blackIcons=['outInstc-mgr','book-rep','book-rep-v1','book-pen','paper-settings','book-settings','eye-scan-box','org-frame','alert-pen-gray','paper-set-qus','bk-mgr','pc','pc-v1','pc-v2','ecg-adm','key2','data-stat','user-settings','pda-execution-rate'];
            for(var i=0;i<blackIcons.length;i++){
                $(
                    '<li>\
                    <span class="icon icon-'+blackIcons[i]+'">icon-'+blackIcons[i]+'</span>\
                    </li>'
                ).appendTo(".blacklist");
            }
            //-----
            var chinCharicons=['inpatient','outpatient','emergency','disabler','produce','children','lung','high','spirit','old'
            ,'poor','sugar','free','out-poverty',"pregnant-woman",'make-oppointment','allergy-word','base-word','close-word'
            ,'complex-word','list-word','private-word','public-word','text-word','translate-word','sort','out','change','macpw','macpworder','evaluate-red','evaluate-green','quality','mass-injury','gcp'];
            for(var i=0;i<chinCharicons.length;i++){
                $(
                    '<li>\
                    <span class="icon icon-'+chinCharicons[i]+'">icon-'+chinCharicons[i]+'</span>\
                    </li>'
                ).appendTo(".chinCharlist");
            }
            //----
            var arrowicons=['arrow-left-top','arrow-right-top','arrow-top','arrow-bottom','arrow-right','arrow-left','undo','redo','back','arrow-le-bo-gray'];
            for(var i=0;i<arrowicons.length;i++){
                $(
                    '<li>\
                    <span class="icon icon-'+arrowicons[i]+'">icon-'+arrowicons[i]+'</span>\
                    </li>'
                ).appendTo(".arrowlist");
            }
            //----
            var bigicons = [
            ['doctor-green','doctor-adm','favorite','favorite-add','img','omega','position','print','refresh','unlock'
            ,'book-arrow','book-eye','book-ref','book-arrow-rt','book-arrow-ok','book-to-book','del','save','clear',
            'ring-blue','ring','skip-no','paper-search','paper-pen','paper-arrow','fee-arrow','card-reader','home','stamp','tooth','open-eye','close-eye',
            'stop','start','return','meterage','maint','inspect','disuse','change-account','card','bar','eye-deepgrade'
            ],
            ['lt-rt-19','lt-rt-28','lt-rt-37','lt-rt-46','lt-rt-55','lt-rt-64','lt-rt-73','lt-rt-82'],
            ['delete-col','delete-row','delete-table','insert-col','insert-row','insert-table','split-cells'],
            ['help','paper','question','tip','rad','balance','open-file','waxblock-return','cells-smear','slide-filed',
            'slide-send','dyeing','slide-add','embed','slide-made',
            'slide-return','book-yellow','med-bag','next','pre','print-box','save-add','save-next','print-run'],
            ['cardiogram','conical-bottle','patient-mach','movie-mach','chopsticks-bowl','rectangle-tree','message-clock','message-cate','message-colum','message-pen'],
            ['paper-time','alert-yellow','pre-audit','paper-gray','msg','equi-cfg','med-equi','alert',"idcard","paid","pat-list","read-card",'search-pat','miss-img',
            'paper-yellow','mach-blue-red','first-second','clock-back-blue','clock-back-gree','person-green','report-yel-pen','two-pill-gray','paper-orange','blue-white-circle','three-blue-bar','blue-frame-ok','white-p-red','paper-box'],
			['redlabel-refresh','paper-print','drug-ok','drug-paper','drug-x','drug-forbid','card-money','medibottle','drug-all-ok','drug-back','printer-refresh','medibottle-run'],
            ['insert-local-image','edit-picture','creating-a-pedigree-map','edit-pedigree-chart','image-properties','ca','ca-green']
        ];
            //bigicons.sort();
            for(var j=0;j<bigicons.length;j++){
                var ulObj = $("<ul></ul>").appendTo(".bigiconlist");
                for(var i=0;i<bigicons[j].length;i++){
                    $(
                    '<li class="bigicon">\
                    <span class="icon icon-big-'+bigicons[j][i]+'">icon-big-'+bigicons[j][i]+'</span>\
                    </li>'
                    ).appendTo(ulObj);
                }
            }
            /*-------------------------------------------------*/
            var allicondesclist={};
            var alliconlist=[].concat(icons,papericons,fonticons,arrowicons,chinCharicons);
            
            for(var i=0;i<wicons.length;i++){
                $('<tr class="wicon-tr"><td><span class="icon icon-w-'+wicons[i]+'">&nbsp</span></td><td>icon-w-'+
                    wicons[i]+'</td><td contenteditable="true">'+(iconDictionary['icon-w-'+wicons[i]]||"")
                        +'</td><td></td></tr>')
                    .appendTo('#iconnotelist');
                
            }
            for(var i=0;i<alliconlist.length;i++){
                $('<tr><td><span class="icon icon-'+alliconlist[i]+'">&nbsp</span></td><td>icon-'+
                    alliconlist[i]+'</td><td contenteditable="true">'+(iconDictionary['icon-'+alliconlist[i]]||"")
                        +'</td><td></td></tr>')
                    .appendTo('#iconnotelist');
            }
            for(var i=0;i<bigicons.length;i++){
                for(var j=0;j<bigicons[i].length;j++){
                $('<tr class="bigicon-tr"><td><span class="icon icon-big-'+bigicons[i][j]+'">&nbsp</span></td><td>icon-big-'+
                    bigicons[i][j]+'</td><td contenteditable="true">'+(iconDictionary['icon-big-'+bigicons[i][j]]||"")
                        +'</td><td></td></tr>')
                    .appendTo('#iconnotelist');
                }
            }

        });
        $("body").on('mouseenter','ul li',function(){
            var _t =$(this);
            var cls = _t.text().trim();
            var txt = '无';
            $.each(iconDictionary,function(k){
                if(cls==k) txt = iconDictionary[cls];
                if (txt!='无') {
                    txt = txt.split('，').join('</span><span class="iconpopover">');
                    txt = '<span class="iconpopover">'+txt+'</span>';
                    return false;
                }
            });
            _t.popover({
                style:'inverse',
                trigger:'hover',
                placement:'bottom',
                title:'该图标一般用途',
                content:txt,
                cache:true
            }).popover('show');
        })
        function genallicondesclist(){
                var myallicondesclist={};
                $('#iconnotelist tr').each(function(){
                    var cls=$(this).find('td').eq(1).text();
                    var desc=$(this).find('td').eq(2).text();
                    if(cls) myallicondesclist[cls]=desc;
                    
                })
                console.log("var iconDictionary="+JSON.stringify(myallicondesclist,null,4)+";");
            }
        console.log("点击说明可以进行编辑\n在控制台调用 genallicondesclist(); \n将输出的信息拷贝至icondic.js");
    </script>
    <prettyprint/>
</body>
</html>